.tab {
  cursor: pointer;
  display: flex;
  font: var(--font-bl-regular);
  color: var(--primary-surface-darker);

  // text-transform: uppercase;

  &-active {
    color: var(--primary-surface-default);
  }
}

.tabs {
  &-wrapper {
    position: relative;
    display: flex;
    gap: var(--gap-main);
    align-items: center;
    height: 50px;
  }

  &-indicator {
    content: '';
    position: absolute;
    bottom: -2px;
    height: 2px;
    background: var(--primary-surface-default);
    transition: all 0.3s ease-in-out;
  }
}
